<template>
  <div class="tabs-head">
    <a-tabs v-model:activeKey="selectedKeys[0]" type="editable-card" @edit="onEdit" @tabClick="tabClick" hideAdd >
      <a-tab-pane v-for="pane in tabsList" :key="pane.fullPath" :closable="pane.closable">
        <template #tab>
          <div class="tab">
            <a-icon class="icon-sync" :style="selectedKeys[0] == pane.fullPath ? 'width: 14px': 'width: 0px'" name="SyncOutlined" :spin="loading" @click="onRefresh(pane)"></a-icon>
            <div class="title">{{ pane.name }}</div>
          </div>
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import { computed, ref, defineEmits } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore()
const router = useRouter()
const selectedKeys = computed(() => store.getters['menu/selectedKeys'])
const tabsList = computed(() => store.getters['tabs/tabsList'])

const tabClick = (fullPath) => {
  router.push({path: fullPath})
}

const onEdit = (key, action) => {
  if(action == 'remove'){
    store.commit('tabs/removeTabs', key)
  }
}

const emits = defineEmits(['refresh'])

let loading = ref(false)
const onRefresh = (tabInfo) => {
  if(!loading.value){
    loading.value = true
    emits('refresh', tabInfo)
    setTimeout(() => {
      loading.value = false
    }, 500);
  }else{
    loading.value = false
  }
}

</script>

<style lang="less" scoped>
.tabs-head{
  padding: 10px 24px 0 24px;
  & .ant-tabs-tab{
    color: rgba(0,0,0,.65);
  }
}
.tab{
  margin: 0 -16px;
  padding: 0 16px;
  font-size: 14px;
  user-select: none;
  transition: all 0.3s;
  display: inline-block;
  .title{
    display: inline-block;
    height: 100%;
  }
  .icon-sync{
    margin-right: 8px;
    transition: width .3s;
    overflow: hidden;
  }
}
.ant-tabs-dropdown{
  .icon-sync{
  }
}
</style>
<style>
.tabs-head .ant-tabs-nav{
  margin: 0;
}
</style>